<template>
  <view class="p-slogan">
    <view class="left">
      <view class="title">{{ topBar.title || '好物推荐' }}</view>
      <view class="subtitle">{{ topBar.subtitle || '爆款热销，正品保障' }}</view>
    </view>
    <view v-if="sales" class="sales">{{sales}}</view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'PSlogan',
  components: {

  },
  props: {
    sales: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    };
  },
  computed: {
    ...mapState({
      topBar: state => state['product'].pageModule?.topBar || {}
    })
  },
  watch: {},
  created() {

  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.p-slogan{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  padding: 20px var(--padding);
  .left{
    display: flex;
    flex:1;
    align-items: center;
    font-size: 26px;
    color: #999999;
    .title{
      font-size: 28px;
      background: #F6D090;
      color: #572D00;
      border-radius: 8px;
      padding: 0 8px;
    }
    .subtitle{
      margin-left: 16px;
    }
  }

  .sales{
    flex: none;
    font-size: 26px;
    color: #999999;
  }
}
</style>
